<template>
	<view class="self-container">

		<!-- 登录用户展示 -->
		<view class="self-user-info" v-if="userInfo">
			<view class="user-info-background">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-info-logo">
				<view class="info-image" @click="updataAvatar">
					<image :src="userInfo.avatar" mode="aspectFit"></image>
				</view>

				<view class="info-title">
					{{userInfo.author_name}}
				</view>
			</view>

			<view class="user-info-bottom">
				<view class="info-bottom-title">
					被关注
					<view class="title-number">
						{{userInfo.follow_count}}
					</view>
				</view>
				<view class="info-bottom-title">
					粉丝
					<view class="title-number">
						{{userInfo.fans_count}}
					</view>
				</view>
				<view class="info-bottom-title">
					积分
					<view class="title-number">
						{{ userInfo.integral_count || 0}}
					</view>
				</view>
			</view>
		</view>
		<!-- 未登录用户展示 -->
		<view v-if="!userInfo" class="self-user-content" @click="loginOn">
			<view class="user-content-title">
				<image src="../../static/img/my.png" mode="scaleToFill"></image>
				<text>
					Hi,您尚未登录，请点击登录
				</text>
			</view>
			<uni-icons type="forward" size="22" color="#666"></uni-icons>
		</view>

		<!-- 文章 | 意见 -->
		<view class="self-user-content" @click="goMyArticle">
			<view class="user-content-title">
				<uni-icons class="icons" type="person-filled" size="22"></uni-icons>
				<text>
					我的文章
				</text>
			</view>
			<uni-icons type="forward" size="22" color="#666"></uni-icons>
		</view>
		<view class="self-user-content" @click="goFeedbackPage">
			<view class="user-content-title">
				<uni-icons class="icons" type="help" size="22"></uni-icons>
				<text>
					意见反馈
				</text>
			</view>
			<uni-icons type="forward" size="22" color="#666"></uni-icons>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="self-user-content edition-container">
			<view class="user-content-title ">
				<uni-icons class="icons" type="info-filled" size="22"></uni-icons>
				<text>
					当前版本
					<text v-if="isnewEdition" class="newEdition" @click="isnewEdition&&getNewVersion">点击下载最新版本</text>
				</text>
			</view>
			<text class="edition-title">v{{currentEdition}}</text>
		</view>

		<!-- #endif -->

		<button type="warn" v-if="userInfo" class="self-login-btn" @click="loginOut">退出登录</button>

	</view>
</template>

<script>
	export default {
		onLoad() {
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: res => {
					//判断当前平台是不是安卓
					if (res.platform === 'android') {
						plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
							this.currentEdition = wgtinfo;
							this.checkVersion();
						})
					}
				},
			})
			// #endif

		},
		data() {
			return {
				isnewEdition: false,
				currentEdition: '1.0.0',
				downLoadLinkUrl: null
			}
		},
		methods: {
			//退出登录
			loginOut() {
				this.$store.commit('updetaUserInfo', null);
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			//用户登录
			loginOn() {
				uni.navigateTo({
					url: '/pages/userInfo/login/login'
				})
			},
			//检查APP当前应用的版本
			async checkVersion() {
				const {
					version,
					downLoadLinkUrl
				} = await this.$http.get_current_version();
				if (version > this.currentEdition) {
					this.isnewEdition = true;
					this.downLoadLinkUrl = downLoadLinkUrl
				}
			},
			//APP最新版本的下载
			getNewVersion() {
				uni.showLoading({
					title: "正在下载中..."
				});
				var dtask = plus.downloader.createDownload(this.downLoadLinkUrl, {}, function(d, status) {
					//下载完成
					uni.hideLoading({});
					if (status === 200) {
						plus.runtime.install(plus.io.convertLocalFileSystemURL(d, filename), {}, {}, function(
							error) {
							uni.showToast({
								title: "安装失败",
								duration: 1500,
								icon: "none"
							})
						})
					} else {
						uni.showToast({
							title: "更新失败",
							duration: 1500,
							icon: "none"
						})
					}
				});
				dtask.start()
			},
			//点击跳转到我的文章界面
			goMyArticle() {
				uni.navigateTo({
					url: '/pages/myArticle/myArticle'
				})
			},
			//点击跳转意见反馈页面
			goFeedbackPage() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},
			//更换头像
			updataAvatar() {
				uni.chooseImage({
					count: 1,
					success: async res => {
						console.log(res)
						const item = res.tempFiles[0]
						const filePath = await this.uploadFile(item.path, item.name || Date.now().toString() +
							item.size.toString())
						await this.updataUserAvatar(filePath)
					}
				})
			},
			//上传图片
			async uploadFile(url, name) {
				const {
					fileID
				} = await uniCloud.uploadFile({
					cloudPath: name,
					filePath: url
				})
				return fileID
			},
			//上传更换用户头像
			async updataUserAvatar(url) {
				const {
					msg
				} = this.$http.updata_avatar({
					userId: this.userInfo._id,
					avatarImg: url
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				//修改vuex里的用户数据

				this.updetaUserInfo({
					...this.userInfo,
					avatar: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	@import 'css/self.scss'
</style>
